<template>
	<view class="xiangqing">
		<!-- 支付成功 -->
		<view style="color: white;
		font-size: 26rpx; margin-bottom: 30rpx;">支付成功,请你前往指定门店消费</view>
		<!-- 商家信息 -->
		<view style="display: flex; color: white;">
			<img style="padding-top: 2%;width: 28rpx;height: 28rpx;"
				src="@/static/lyl-img/dingdanxiangqing/商家@3x.png" />
			<!-- <view style="margin-left: 20rpx;">
				<view style="font-size: 26rpx;">{{repairFactoryName}}</view>
				<view style="font-size: 24rpx; color: grey;">{{repairFactoryAddress}}</view>
			</view> -->
			<view style="margin-left: 20rpx;">
				<view style="font-size: 26rpx;">伟业汽车美容店(人民路店)</view>
				<view style="font-size: 24rpx;">山阳区人民中路33号</view>
			</view>
		</view>
		<!-- 订单详情 -->
		<view class="section">
			<view class="Tsection">
				<text class="section-title">订单详情</text>
			</view>
			<view class="details">
				<view class="row">
					<text class="row-one">车辆精洗</text>
					<text class="row-two">¥39.90</text>
				</view>
				<view class="row">
					<text class="row-one">车辆附加费用</text>
					<text class="row-two">0</text>
				</view>
				<view class="row">
					<text class="row-one">原价</text>
					<text class="row-two">¥59.90</text>
				</view>
				<view class="row">
					<text class="row-one">店家优惠</text>
					<text class="discount">- ¥20</text>
				</view>
				<view class="row">
					<text class="row-one">优惠券</text>
					<text class="discount">- ¥10</text>
				</view>
				<view class="row total">
					<text class="row-one">支付金额</text>
					<text class="total-amount">¥29.90</text>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="section2">
			<view class="Tsection">
				<text class="section-title">订单信息</text>
			</view>
			<view class="info">
				<text class="info-one">订单号：121212112487878</text>
				<text class="info-one">下单时间：2023-03-08 17:40</text>
				<text class="info-one">车辆：奔驰FWE4/豫A98FHJ</text>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.xiangqing {
		margin: 0;
		padding: 20rpx 40rpx;
		height: 400rpx;
		background-color: #3687fe;
		background-image: url("../../../static/img/图层 1@3x.png");
	}

	.container {
		background-color: #f8f8f8;
		padding: 20rpx;
	}

	.nav-bar {
		background-color: #007aff;
		padding: 24rpx;
		text-align: center;
		color: white;
		font-size: 36rpx;
	}

	.section {
		border-radius: 20rpx;
		box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0),
			/*上边阴影  透明*/
			-10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*左边阴影  透明*/
			10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*右边阴影  透明*/
			0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		/*下边阴影 */
		background-color: white;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.section2 {
		height: 400rpx;
		border-radius: 20rpx;
		box-shadow: 0px -10px 0px 0px rgba(0, 0, 0, 0),
			/*上边阴影  透明*/
			-10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*左边阴影  透明*/
			10px 0px 0px 0px rgba(0, 0, 0, 0),
			/*右边阴影  透明*/
			0px 10px 30px 0px rgba(0, 0, 0, 0.1);
		/*下边阴影 */
		background-color: white;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.discount {
		color: red;
		display: block;
		height: 80rpx;
		width: 25%;
		float: right;
		/* background-color: bisque; */
		text-align: right;
		padding-right: 10rpx;
		line-height: 80rpx;
	}

	.total {
		font-weight: bold;
		border-top: 1px solid #e0e0e0;
		margin-top: 10rpx;
		padding-top: 10rpx;
	}

	.total-amount {
		color: green;
		display: block;
		height: 80rpx;
		width: 25%;
		float: right;
		/* background-color: bisque; */
		text-align: right;
		padding-right: 10rpx;
		line-height: 80rpx;
	}

	/* 设置 */
	.section-title {
		display: block;
		width: 70%;
		height: 80rpx;
		/* background-color: yellowgreen; */
		font-weight: 600;
		line-height: 80rpx;
		padding-left: 10rpx;
		float: left;
	}

	.section-one {
		width: 28%;
		height: 80rpx;
		/* background-color: #007aff; */
		float: right;
		font-size: 28rpx;
		text-align: right;
		line-height: 80rpx;
		color: #FF602F;
	}

	.info {
		height: 560rpx;
		/* background-color: firebrick; */
	}

	.Tsection {
		height: 80rpx;
		/* background-color: deepskyblue; */
		border-bottom: #F7F7F7 solid 7rpx;
	}

	.info-one {
		display: block;
		height: 80rpx;
		/* background-color: green; */
		line-height: 80rpx;
	}

	.details {
		height: 650rpx;
		/* background-color: blueviolet; */
	}

	.row {
		display: block;
		height: 80rpx;
		/* background-color: #FF602F; */
		border-bottom: #F7F7F7 solid 3rpx;
	}

	.row-one {
		display: block;
		height: 80rpx;
		width: 70%;
		float: left;
		line-height: 80rpx;
		padding-left: 10rpx;
	}

	.row-two {
		display: block;
		height: 80rpx;
		width: 25%;
		float: right;
		text-align: right;
		/* background-color: bisque; */
		line-height: 80rpx;
		padding-right: 10rpx;
	}

	.section-text {
		height: 80rpx;
		/* background-color: #FF602F; */
		text-align: center;
		line-height: 80rpx;
	}

	.section-text>text {
		font-size: 37rpx;
	}

	.section-image {
		height: 220rpx;
		/* background-color: #007aff; */
		text-align: center;
		padding-top: 20rpx;
	}

	.section-image>image {
		width: 200rpx;
		height: 200rpx;
	}
</style>